<template>
  <div class="block">
    <el-container>
      <div class="el-main">
        <div class="container-top">
          <div class="analysis-box">
            <div class="analysis-title">调车月报查询</div>
            <div>
              <el-select v-model="queryData.stationName" placeholder="请选择车站" style="width: 140px" class="filter-item">
                <el-option v-for="(item, index) in stationNameOptions" :key="index" :label="item" :value="item" />
              </el-select>
              <el-input v-model.trim="queryData.dj" placeholder="请输入机车号" style="width: 140px" class="filter-item" />
              <el-select v-model="queryData.area" placeholder="请选择区域" clearable style="width: 140px" class="filter-item">
                <el-option v-for="(item, index) in locationOptions" :key="index" :label="item" :value="item" />
              </el-select>
              <el-date-picker v-model="queryData.month" :clearable="false" type="month" style="width: 140px" placeholder="选择月份" format="yyyy-MM" value-format="yyyy-MM" @change="monthChange" placement="bottom-start"></el-date-picker>

              <el-button class="reset" type="success" @click="reset">重置</el-button>
              <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">查询</el-button>
            </div>

            <div>
              <el-table :key="tableKey" v-loading="listLoading" :data="rcvTableData" border fit height="350">
                <el-table-column label="序号" prop="id" align="center" width="80">
                  <template slot-scope="scope">
                    <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="站名" align="center">
                  <template slot-scope="{ row }">
                    <span>{{ row.station }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="地点" align="center">
                  <template slot-scope="{ row }">
                    <span>{{ row.workArea }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="机车号" align="center">
                  <template slot-scope="{ row }">
                    <span>{{ row.dj }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="作业单数" align="center">
                  <template slot-scope="{ row }">
                    <span>{{ row.batchNumber }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="调车钩数" align="center">
                  <template slot-scope="{ row }">
                    <span>{{ row.hungNumber }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="车辆数" align="center">
                  <template slot-scope="{ row }">
                    <span>{{ row.clNumber }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="作业时间(小时)" align="center">
                  <template slot-scope="{ row }">
                    <span>{{ row.hour }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>

        <div class="container-top">
          <div class="analysis-box">
            <div class="analysis-title">调车月报统计</div>
            <div class="dc-echarts">
              <Echarts ref="dcEchart" v-if="JSON.stringify(analysisOption) != '{}'" :options="analysisOption" :auto-resize="true"></Echarts>
            </div>
          </div>
        </div>
      </div>
    </el-container>
  </div>
</template>

<script>
// require('../components/echartsThreme')
import { getStationNames } from '@/api/dataQuery'
import { getDcMonthlyReportAnalysisInfo } from '@/api/statistics'
// import dcMonthlyReportChart from './chart'
import dayjs from 'dayjs'
import Echarts from 'vue-echarts'
import * as echarts from 'echarts'
import './index.scss'
export default {
  data() {
    return {
      queryData: {
        stationName: '', // 站场名称
        dj: '', // 调车机
        area: '', // 地点
        month: dayjs().format('YYYY-MM')
      },
      stationId: '',
      listLoading: false,
      tableKey: 0,
      currentPage: 1,
      pageSize: 10,
      totalDataLength: 0,
      stationNameOptions: [],
      locationOptions: ['站内', '专用线', '驼峰'],
      rcvTableData: [],
      tableHeight: 0,
      shuntbatch: [],
      shuntHook: [],
      cars: [],
      stationnameList: [],
      analysisOption: {}
    }
  },
  components: {
    // dcMonthlyReportChart
    Echarts
  },
  created() {
    this.getAllStationNames()

    // this.getTableData()
  },
  mounted() {},
  computed: {},
  watch: {
    cars(nv, ov) {
      console.log(nv, ov, 'nvon')
    }
  },
  methods: {
    monthChange(val) {
      this.queryData.month = val
    },

    getAllStationNames() {
      this.stationNameOptions = []
      getStationNames({}).then(res => {
        if (res.code === 0) {
          this.stationNameOptions = res.data
          this.queryData.stationName = res.data[0]
          this.stationnameList = res.data
          let newObj = this.queryData
          this.getTableData(newObj)
        } else {
          this.listLoading = true
          this.$message(res.msg)
        }
      })
    },
    getTableData(newObj) {
      getDcMonthlyReportAnalysisInfo(newObj).then(res => {
        if (res.code == 0 && res.data.length != 0) {
          this.rcvTableData = res.data
          let hookArr = []
          let batchArr = []
          let car = []
          let djArr = []
          res.data.forEach(ele => {
            hookArr.push(ele.hungNumber)
            batchArr.push(ele.batchNumber)
            car.push(ele.clNumber)
            djArr.push(ele.dj)
          })
          let newoption = {
            tooltip: {
              trigger: 'axis',
              formatter: '{b}<br />{a0}: {c0}批<br />{a1}: {c1}辆<br />{a2}: {c2}钩<br />',
              axisPointer: {
                type: 'shadow',
                label: {
                  // backgroundColor: '#6a7985'
                }
              },
              textStyle: {
                color: '#fff',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12
              }
            },
            grid: {
              top: 35,
              left: '2%',
              right: '2%',
              bottom: '3%',
              containLabel: true
            },
            legend: {
              data: ['调车批数', '车辆数', '调车钩数'],
              textStyle: {
                color: '#fff'
              }
            },
            color: ['#52BCA9', '#E46666', '#3BA272', '#FC8452', '#9A60B4', '#73C0DE', '#91CC75', '#5470C6'],
            xAxis: [
              {
                type: 'category',
                // data: this.stationnameList,
                data: djArr,
                axisTick: {
                  alignWithLabel: true
                },
                axisLine: {
                  lineStyle: {
                    color: '#fff'
                  }
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#FFF', // 更改坐标轴文字颜色
                    fontSize: 14 // 更改坐标轴文字大小
                  }
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: ['#fff'],
                    opacity: 0.1
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: '#fff'
                  }
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#FFF', // 更改坐标轴文字颜色
                    fontSize: 14 // 更改坐标轴文字大小
                  }
                }
              }
            ],
            series: [
              {
                name: '调车批数',
                type: 'bar',
                barGap: '0',
                barWidth: 30,
                data: batchArr,
                label: {
                  //图形上的文本标签
                  normal: {
                    show: true,
                    position: 'top',
                    textStyle: {
                      color: '#a8aab0',
                      fontStyle: 'normal',
                      fontFamily: '微软雅黑',
                      fontSize: 12
                    }
                  }
                },
                itemStyle: {
                  //图形样式
                  normal: {
                    barBorderRadius: [5, 5, 0, 0]
                  }
                }
              },
              {
                name: '车辆数',
                type: 'bar',
                barGap: '0',
                barWidth: 30,
                data: car,
                label: {
                  //图形上的文本标签
                  normal: {
                    show: true,
                    position: 'top',
                    textStyle: {
                      color: '#a8aab0',
                      fontStyle: 'normal',
                      fontFamily: '微软雅黑',
                      fontSize: 12
                    }
                  }
                },
                itemStyle: {
                  //图形样式
                  normal: {
                    barBorderRadius: [5, 5, 0, 0]
                  }
                }
              },

              {
                name: '调车钩数',
                type: 'bar',
                barGap: '0',
                barWidth: 30,
                data: hookArr,
                label: {
                  //图形上的文本标签
                  normal: {
                    show: true,
                    position: 'top',
                    textStyle: {
                      color: '#a8aab0',
                      fontStyle: 'normal',
                      fontFamily: '微软雅黑',
                      fontSize: 12
                    }
                  }
                },
                itemStyle: {
                  //图形样式
                  normal: {
                    barBorderRadius: [5, 5, 0, 0]
                  }
                }
              }
            ]
          }
          this.analysisOption = newoption
        } else {
          this.rcvTableData = []
          this.analysisOption = {}
          // this.totalDataLength= 0
          this.$message(res.msg ? res.msg : '数据为空')
        }
      })
    },
    reset() {
      this.queryData.month = dayjs().format('YYYY-MM')
      this.queryData.dj = ''
      this.queryData.area = ''
      this.currentPage = 1
      this.pageSize = 10
      this.getTableData(this.queryData)
    },
    search() {
      this.getTableData(this.queryData)
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      this.getTableData(this.queryData)
    },
    handleSizeChange: function(size) {
      this.pageSize = size
      this.getTableData(this.queryData)
    }
  }
}
</script>

<style lang="scss" scoped>
// @import '../style.scss';
</style>
